<template>
     <a-modal 
      class="modal"
      title="公告信息" 
      cancelText='取消' 
      okText='发送'
      @ok="submit"
      @cancel="cancel"
     >
       <a-card class='card' size="middle" title="发布公告的区域与物业电话" style="width: 300px">
          <a-table class='table'  size="small" :columns="columns" :data-source="attrs" />
       </a-card> 
       <div class="content">
        <span style="font-weight:700">公告标题：</span>
        <a-input class='input' v-model:value="title" placeholder="请输入内容"  :rows="4"/>
        <span style="font-weight:700">公告信息：</span>
        <a-textarea class='input' v-model:value="content" placeholder="请输入内容"  :rows="4"/>
       </div>
    </a-modal>
</template>
  
<script setup>
import {ref} from 'vue'
  const props = defineProps({
    attrs: {
      type: Array,
      required: true,
      default: [],
    },
  })

  const content = ref('')
  const title = ref('')

  const Emits = defineEmits(["submit","cancel"])

  const submit = ()=>{
    Emits('submit',content.value,title.value)
  }

  const cancel = ()=>{
     Emits('cancel')
  }

  const columns = [{
      title: '区域名称',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '物业电话',
      dataIndex: 'tel',
      key: 'tel',
    }
  ]
</script>

<style>
  .modal{
    position: fixed !important;
    top: 5vh;
    left:30vw;
    width: 60%;
  }
</style>
  
<style scoped>

 .table{
  max-height: 30vh;
  overflow-y: scroll;
  border:1px solid rgb(245, 245, 245)
 } 
 .card{
  min-width:100%;
  margin-top: -24px;
 }
 .card >>> .ant-card-head {
    height: 5vh;
    padding: 0px 8px;
    line-height: 3vh;
    background: rgb(245, 245, 245);
    font-weight: 400;
 }
 .content{
  margin-top:6px;
 }
 .input {
    max-width: 85%;
    height: auto;
    min-height: 32px;
    margin-bottom:3px;
    line-height: 1.5715;
    vertical-align: top;
    transition: all 0.3s, height 0s;
    display: inline-block;
}
</style>